<!-- cell分组 -->
<template>
  <view
    class="aster-cell"
    :style="addStyle(props.customStyle)"
    :hover-class="
      !props.disabled && (props.clickable || props.isLink) ? 'aster-cell--clickable' : ''
    "
    :hover-stay-time="250"
    @tap="clickHandler"
  >
    <view
      class="aster-cell__body"
      :class="[
        props.center && 'aster-cell--center',
        props.size === 'large' && 'aster-cell__body--large',
      ]"
    >
      <view class="aster-cell__body__content">
        <view class="aster-cell__left-icon-wrap" v-if="$slots.icon || props.icon">
          <slot name="icon" v-if="$slots.icon"> </slot>
          <uni-icons
            v-else
            :type="`iconfont ${props.icon}`"
            :color="props.iconColor"
            :size="props.size === 'large' ? 22 : 18"
            custom-prefix="custom-icon"
          />
        </view>
        <view class="aster-cell__title">
          <slot name="title">
            <text
              v-if="props.title"
              class="aster-cell__title-text"
              :style="titleTextStyle"
              :class="[
                props.disabled && 'aster-cell--disabled',
                props.size === 'large' && 'aster-cell__title-text--large',
              ]"
            >
              {{ props.title }}
            </text>
          </slot>
          <slot name="label">
            <text
              class="aster-cell__label"
              v-if="props.label"
              :class="[
                props.disabled && 'aster-cell--disabled',
                props.size === 'large' && 'aster-cell__label--large',
              ]"
            >
              {{ props.label }}
            </text>
          </slot>
        </view>
      </view>
      <slot name="value">
        <text
          class="aster-cell__value"
          :class="[
            props.disabled && 'aster-cell--disabled',
            props.size === 'large' && 'aster-cell__value--large',
          ]"
          v-if="!isEmpty(props.value)"
        >
          {{ props.value }}
        </text>
      </slot>
      <view
        class="aster-cell__right-icon-wrap"
        v-if="$slots['right-icon'] || props.isLink"
        :class="[`aster-cell__right-icon-wrap--${props.arrowDirection}`]"
      >
        <slot name="right-icon" v-if="$slots['right-icon']"> </slot>
        <uni-icons
          v-else
          :type="`iconfont ${props.rightIcon}`"
          :color="props.disabled ? '#c8c9cc' : props.rightIconColor"
          :size="props.size === 'large' ? 18 : 16"
          custom-prefix="custom-icon"
        />
      </view>
    </view>
    <view v-if="props.border" class="aster-line" />
  </view>
</template>
<script setup lang="ts">
  import { addStyle } from '@/utils';
  import { isEmpty } from '@/utils/is';
  import { computed } from 'vue';

  const props = defineProps({
    // 标题
    title: {
      type: String,
      default: () => '',
    },
    // 标题下方的描述信息
    label: {
      type: String,
      default: () => '',
    },
    // 右侧的内容
    value: {
      type: String,
      default: () => '',
    },
    // 左侧图标名称，或者图片链接(本地文件建议使用绝对地址)
    icon: {
      type: String,
      default: () => '',
    },
    // 是否禁用cell
    disabled: {
      type: Boolean,
      default: () => false,
    },
    // 是否显示下边框
    border: {
      type: Boolean,
      default: () => true,
    },
    // 内容是否垂直居中(主要是针对右侧的value部分)
    center: {
      type: Boolean,
      default: () => false,
    },
    // 点击后跳转的URL地址
    url: {
      type: String,
      default: () => '',
    },
    // 链接跳转的方式，内部使用的是uView封装的route方法，可能会进行拦截操作
    linkType: {
      type: String,
      default: () => '',
    },
    // 是否开启点击反馈(表现为点击时加上灰色背景)
    clickable: {
      type: Boolean,
      default: () => false,
    },
    // 是否展示右侧箭头并开启点击反馈
    isLink: {
      type: Boolean,
      default: () => false,
    },
    // 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件)
    required: {
      type: Boolean,
      default: () => false,
    },
    // 右侧的图标箭头
    rightIcon: {
      type: String,
      default: () => 'icon-youjiantou',
    },
    // 右侧箭头的方向，可选值为：left，up，down
    arrowDirection: {
      type: String,
      default: () => 'icon-youjiantou',
    },
    // 左侧图标样式
    iconColor: {
      type: String,
      default: () => '#909399',
    },
    // 右侧箭头图标的样式
    rightIconColor: {
      type: String,
      default: () => '#909399',
    },
    // 标题的样式
    titleStyle: {
      type: [Object, String],
      default: () => {
        return {};
      },
    },
    // 单位元的大小，可选值为large
    size: {
      type: String,
      default: () => 'large',
    },
    // 点击cell是否阻止事件传播
    stop: {
      type: Boolean,
      default: () => true,
    },
    // 标识符，cell被点击时返回
    name: {
      type: [Number, String],
      default: () => '',
    },
    customStyle: {
      type: [Object, String],
      default: () => {
        return {};
      },
    },
  });

  const emits = defineEmits(['click']);

  const titleTextStyle = computed(() => {
    return addStyle(props.titleStyle);
  });

  const clickHandler = (e: any) => {
    if (props.disabled) return;
    emits('click', {
      name: props.name,
    });
    // 如果配置了url(此props参数通过mixin引入)参数，跳转页面
    openPage();
    // 是否阻止事件传播
    props.stop && preventEvent(e);
  };

  const openPage = () => {
    if (props.url) {
      // 执行类似uni.navigateTo的方法
      uni.navigateTo({
        url: props.url,
      });
    }
  };

  // 阻止事件冒泡
  const preventEvent = (e: any) => {
    e && typeof e.stopPropagation === 'function' && e.stopPropagation();
  };
</script>
<style lang="scss" scoped>
  view,
  scroll-view,
  swiper-item {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
    align-items: stretch;
    align-content: flex-start;
  }

  .aster-cell {
    &__body {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      /* #ifndef APP-NVUE */
      box-sizing: border-box;
      /* #endif */
      padding: 20rpx 30rpx;
      font-size: 30rpx;
      color: #303133;
      // line-height: 48rpx;
      align-items: center;

      &__content {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        align-items: center;
        flex: 1;
      }

      &--large {
        padding-top: 26rpx;
        padding-bottom: 26rpx;
      }
    }

    &__left-icon-wrap,
    &__right-icon-wrap {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      align-items: center;
      // height: 48rpx;
      font-size: 32rpx;
    }

    &__left-icon-wrap {
      margin-right: 8rpx;
    }

    &__right-icon-wrap {
      margin-left: 8rpx;
      transition: transform 0.3s;

      &--up {
        transform: rotate(-90deg);
      }

      &--down {
        transform: rotate(90deg);
      }
    }

    &__title {
      flex: 1;

      &-text {
        font-size: 30rpx;
        line-height: 44rpx;
        color: #303133;

        &--large {
          font-size: 32rpx;
        }
      }
    }

    &__label {
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #909193;
      line-height: 36rpx;

      &--large {
        font-size: 28rpx;
      }
    }

    &__value {
      text-align: right;
      font-size: 28rpx;
      line-height: 48rpx;
      color: #606266;

      &--large {
        font-size: 30rpx;
      }
    }

    &--clickable {
      background-color: #f3f4f6;
    }

    &--disabled {
      color: #c8c9cc;
      /* #ifndef APP-NVUE */
      cursor: not-allowed;
      /* #endif */
    }

    &--center {
      align-items: center;
    }
  }

  .aster-line {
    margin: 0rpx;
    border-bottom-width: 2rpx;
    border-bottom-style: solid;
    width: 100%;
    border-color: #d6d7d9;
  }
</style>
